import { Fragment, useCallback, } from 'react'
import { Button, Col, Form, Input, Row, Select } from 'antd';

export default function ExaminationSearch({
  onFinish,
  setOpen,
  role,
  Reset,
  curriculum,
  classes
}) {
  const [form] = Form.useForm();

  const handleReset = useCallback(() => {
    form.resetFields();
  }, [form]);

  const assessmentOptions = [
    { value: '1', label: '开卷', },
    { value: '2', label: '闭卷', },
    { value: '3', label: '考核', },
  ]

  const teaSearchItems = [
    { name: "fd_curriculumNum", label: "课程", span: 4, offset: 0, options: curriculum },
    { name: "fd_assessmentMethod", label: "考核方式", span: 5, offset: 0, options: assessmentOptions },
    { name: "fd_claNum", label: "班级", span: 4, offset: 0, options: classes },
  ]
  const stuSearchItems = [
    { name: "fd_curriculumName", label: "课程", span: 4, offset: 0, options: curriculum },
    { name: "fd_assessmentMethod", label: "考核方式", span: 5, offset: 0, options: assessmentOptions },
  ]

  const searchItems = role?.fd_type === "student" ? stuSearchItems : role?.fd_type === "teacher" ? teaSearchItems : []

  return (
    <Fragment>
      <Form
        form={form}
        name="advanced_search"
        onFinish={onFinish}
        size="small"
      >
        <Row gutter={32}  >
          {
            searchItems.map((item) => {
              return (
                <Col span={item.span} offset={item.offset} key={item.name}>
                  <Form.Item
                    name={item.name}
                    label={item.label}
                    col={{ span: 4 }}
                  >
                    {
                      role?.fd_type === "student" && item.name === "fd_curriculumName" ? <Input /> :
                        <Select
                          showSearch
                          filterOption={(input, option) =>
                            (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                          }
                          listHeight={90}
                          style={{ width: 130 }}
                          key="value"
                          options={item.options}
                        />
                    }
                  </Form.Item>
                </Col>
              )
            })
          }
          <Col className="trainingPlan-sea-but" span={4} offset={1}>
            <Form.Item>
              <Button htmlType='submit'>检索考试信息</Button>
              <Button onClick={() => {
                handleReset();
                Reset()
              }}>重置</Button>
            </Form.Item>
          </Col>
          {
            role?.fd_type === "teacher" &&
            <Col span={2} offset={4}>
              <Button onClick={() => setOpen(true)}>添加考试</Button>
            </Col>
          }
        </Row>
      </Form>
    </Fragment>
  )
}
